<template>
  <div class="file-comment">
    <div class="comment-item">
      <div class="head">
        <div class="left">
          <div class="head-img">
            <img src="https://image.dongping.link/imageupload/3022db7803924133aeed921cb73822c9.png" alt="" />
          </div>
          <div class="head-info">
            DongPing
            <span>湖南长沙</span>
            <span>刚刚</span>
          </div>
        </div>
        <div class="right">回复</div>
      </div>
      <div class="comment-text">我是一条评论</div>

      <!-- 回复列表 -->
      <div class="reply">
        <div v-for="(item, index) in 2" :key="index" class="comment-item">
          <div class="head">
            <div class="left">
              <div class="head-img">
                <img src="https://image.dongping.link/imageupload/3022db7803924133aeed921cb73822c9.png" alt="" />
              </div>
              <div class="head-info">
                DongPing
                <span>湖南长沙</span>
                <span>刚刚</span>
              </div>
            </div>
            <div class="right">回复</div>
          </div>
          <div class="comment-text">我是一条评论</div>
        </div>
        <div class="more more-reply">
          剩余1条
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
    </div>

    <div class="comment-more">
      剩余1条
      <i class="el-icon-arrow-down"></i>
    </div>
  </div>
</template>

<script>
import commentForm from '../comment-form/comment-form';
export default {
  name: 'WorkspaceJsonFileComment',
  components: {
    commentForm,
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.file-comment {
  // 评论
  .more {
    display: inline-block;
    font-size: 12px;
    color: #999;
    margin-top: 5px;
    border-radius: 3px;
    padding: 2px 4px;
    cursor: pointer;
  }
  .comment-more {
    margin-left: 40px;
    margin-top: 10px;
    font-size: 14px;
    color: #999;
    text-align: center;
  }
}
// 评论每一项
.comment-item {
  margin-bottom: 8px;
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    .left {
      display: flex;
      align-items: center;
      .head-img {
        flex: none;
        width: 25px;
        height: 25px;
        background: #ccc;
        margin-right: 10px;
        border-radius: 3px;
        overflow: hidden;
      }
      .head-info {
        color: #607199;
        span {
          color: #c5c5c5;
        }
      }
    }
    .right {
      color: #607199;
    }
  }

  .comment-text {
    padding-left: 40px;
    margin-top: 5px;
    font-size: 14px;
  }

  .reply {
    margin-left: 40px;
    padding: 10px;
    background: #f5f7f9;
    background: #f5f5f5;

    margin-top: 10px;

    .more-reply {
      margin-left: 40px;
    }
  }
}
</style>
